<template>
	<view class="uni-container" >

		<view class="housingfund">
			<view class="location display_flex">
				<view class="uni-flex uni-row" style="-webkit-justify-content: flex-start;justify-content: flex-start;">
					<view class="local-title">缴纳城市：</view>
					<view class="location_map"></view>
					<view class="local-title">广州市</view>
				</view>
			</view>
			<view class="content" v-if="page === 'sb'">
				<view class="title">
					<view class="">
						社保个人缴纳金额（月）
					</view>
					<view class="insuranceAmount display_flex">
						<text class="display_flex">
							<text class="span">￥</text>
							<input type="number" @input="handleSbInput" v-model="sbValue" maxlength="6"  style="padding: 0 10px; display: inline-block;color: rgba(59,125,224,.5);"/>
						</text>
					</view>
					<view class="inputtip" v-if="showSbTip">
						广州市的社保缴纳范围：343.74-1718.39/月
					</view>
				</view>
				<view class="display_flex">
					<text>当地最低缴纳金额：<text class="number">343.74</text>元</text>
					<text class="usebtn" @click="handleUse">使用</text>
				</view>
			</view>
			
			<view class="content" v-if="page === 'gjj'">
				<view class="title">
					<view class="">
						公积金个人缴纳金额（月）
					</view>
					<view class="insuranceAmount display_flex">
						<text class="display_flex">
							<text class="span">￥</text>
							<input type="number" @input="handleGjjInput" v-model="gjjValue"  maxlength="6"  style="padding: 0 10px; display: inline-block;color: rgba(59,125,224,.5);"/>
						</text>
					</view>
					<view class="inputtip" v-if="showGjjTip">
						广州市的公积金缴纳范围：132.65-2598.75/月
					</view>
				</view>
				<view class="display_flex">
					<text style="float: left;">缴纳基数：</text>
					<view class="inputgroup">
						<input type="text" @input="handleJnInput" v-model="jnjs" />
						<text>元</text>
					</view>
					
					<view style="clear: both;"></view>
				</view>
				<view class="display_flex">
					<text>当地最低缴纳基数：<text class="number">1895</text>元</text>
					<text class="usebtn" @click="handleUse">使用</text>
				</view>
				<view class="display_flex">
					<text style="float: left;">缴纳比例：</text>
					<view class="inputgroup">
						<input type="text" @input="handleJnInput" v-model="jnbl" />
						<text>%</text>
					</view>
					<view style="clear: both;"></view>
				</view>
			</view>
			<view class="submit">
				<view class="submitbtn active" @click="handleSumbit">
					确定
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				page: '',
				sbValue: '',
				showSbTip: false,
				gjjValue: '',
				showGjjTip: false,
				jnjs: 0.00,
				jnbl: 12
			}
		},
		computed: {
			...mapState(['wages'])
		},
		onLoad(e) {
			this.page = e.page
			this.sbValue = this.wages.shebao
			this.gjjValue = this.wages.gongjijin
			
			this.setSbTipShow(this.wages.shebao)
			this.setGjjTipShow(this.wages.gongjijin)
		},
		methods: {
			...mapMutations(['setShebao']),
			...mapMutations(['setGongjijin']),
			handleSbInput(e) {
				this.setSbTipShow(e.detail.value)
			},
			handleGjjInput(e) {
				this.setGjjTipShow(e.detail.value)
			},
			handleJnInput(e) {
				this.gjjValue = (this.jnjs * this.jnbl / 100).toFixed(2)
				this.setGjjTipShow(this.gjjValue)
			},
			handleJnblInput(e) {
				
			},
			setSbTipShow(e) {
				if(e >= 343.74 && e <= 1718.39) {
					this.showSbTip = false
				}else {
					this.showSbTip = true
				}
			},
			setGjjTipShow(e) {
				if(e >= 132.65 && e <= 2598.75) {
					this.showGjjTip = false
				}else {
					this.showGjjTip = true
				}
			},
			handleUse() {
				this.page === 'sb' ? this.sbValue = '343.74' : (this.jnbl = '7' , this.jnjs = '1895'),
				this.showSbTip = false
				this.showGjjTip = false
				this.handleJnInput()
			},
			handleSumbit() {
				this.page === 'sb' ? this.setShebao(this.sbValue) : this.setGongjijin(this.gjjValue)
				
				uni.navigateTo({
					url: '/pages/wages/index'
				});
			}
			
		}
	}
</script>

<style>
	.housingfund {
	    padding: 2rem .6rem .833333rem;
	    font-size: .373333rem;
	    position: relative
	}
	
	.housingfund .location {
	    padding-left: .4rem;
	    align-items: center
	}
	
	.housingfund .location .location_map {
		background: url('/static/wages/maps.png') no-repeat;
		background-size: contain;
		height: 1.0003rem;
		width: 1.0003rem;
		top: 2px;
		position: relative;
	}
	.housingfund .location .local-title {
		font-size: .763333rem;
	}
	
	.housingfund .content {
	    padding: .8rem;
	    background-color: #fff;
	    box-shadow: 0 0 .28rem 0 hsla(0,0%,39.2%,.06);
	    border-radius: .213333rem;
	    margin-top: .506667rem
	}
	
	.housingfund .content .title {
	    border-radius: .106667rem;
	    border: .026667rem solid #e7ecea;
	    padding: .16rem .4rem 0 .4rem;
	    font-size: .32rem
	}
	
	.housingfund .content .title .insuranceAmount {
	    margin: .186667rem 0;
	    align-items: baseline;
	}
	
	
	.housingfund .content .title .insuranceAmount .display_flex {
	    padding-left: .72rem;
	    border-radius: .406667rem;
	    background-color: #fff;
	    height: 1.96rem;
	    width: 9.2rem;
	    align-items: center;
	    margin-right: 1.366667rem;
		display: inline-block;
	}
	
	.housingfund .content .title .insuranceAmount .display_flex_span,
	.housingfund .content .title .insuranceAmount .display_flex .span{
	    position: relative;
		top: -11px;
		color: #3b7de0;
		font-size: 1.307rem;
		display: inline-block;
	}
	
	.housingfund .content .title .insuranceAmount .display_flex input {
	    font-size: 1.333333rem;
	    line-height: 1.96rem;
	    height: 1.96rem;
	    text-indent: .266667rem;
	    color: #3b7de0;
	    width: 6.733333rem;
	}
	
	.housingfund .content .title .insuranceAmount input {
	    height: .826667rem;
	    line-height: 1.066667rem;
	    font-size: .746667rem;
	    width: 6.666667rem;
	    color: rgba(59,125,224,.5)
	}
	
	.housingfund .content .title .inputtip {
	    color: red;
	    padding: .133333rem .83333rem;
		font-size: .62rem;
	}
	
	.housingfund .content>.display_flex {
	    margin-top: .8rem;
	    align-items: center;
	    justify-content: space-between
	}
	
	.housingfund .content>.display_flex .number {
		color: #3b7de0;
	}
	
	.housingfund .content>.display_flex .usebtn {
	    width: 2.96rem;
	    height: 1.346667rem;
	    line-height: 1.346667rem;
	    text-align: center;
	    background-color: #3b7de0;
	    border-radius: 1.273333rem;
		display: inline-block;
	    color: #fff;
		float: right;
	}
	
	.housingfund .content>.display_flex span {
	    color: #3b7de0
	}
	
	.housingfund .content .display_flex {
	    margin-top: .8rem;
	    align-items: center
	}
	
	.housingfund .content .display_flex>div:first-child {
	    margin-right: 1.52rem
	}
	
	.housingfund .content .display_flex .inputgroup {
	    border-radius: .106667rem;
	    border: .026667rem solid #e7ecea;
	    height: 1.426667rem;
		width: 5.666rem;
	    color: #3b7de0;
	    padding: 0 .266667rem;
		float: left;
		margin-left: 2.8888rem;
	}
	
	.housingfund .content .display_flex .inputgroup input {
	    height: 1.426667rem;
	    line-height: 1.426667rem;
	    font-size: .8rem;
	    width: 3.733333rem;
		padding-right: .6666rem;
	    color: #3b7de0;
		float: left;
	}
	
	.housingfund .content .display_flex .inputgroup input::-webkit-input-placeholder {
	    color: #3b7de0
	}
	
	.housingfund .content .display_flex .inputgroup input:-moz-placeholder,.housingfund .content .display_flex .inputgroup input::-moz-placeholder {
	    color: #3b7de0
	}
	
	.housingfund .content .display_flex .inputgroup input:-ms-input-placeholder {
	    color: #3b7de0
	}

	
	.housingfund .submit {
		position: fixed;
		bottom: 1rem;
		left: 5vw;
	}
	.housingfund .submit .submitbtn {
		height: 2.28rem;
		width: 18.146667rem;
		line-height: 2.28rem;
		text-align: center;
		font-size: 0.856667rem;
		color: #fff;
		font-weight: 700;
		border-radius: .94rem;
		background-color: #ccc;
		margin: .7rem auto .333333rem;
	}
	
	.housingfund uni-view.active {
		background-image: linear-gradient(-90deg,#a8a8da,#8c8cee),linear-gradient(#6b6bdb,#5858c5);
		background-blend-mode: normal,normal
	}


</style>
